<script>
import { Shop,
ShoppingBag,
FirstAidKit,HomeFilled, UserFilled, User, Avatar,PictureFilled,CirclePlus,HelpFilled } from '@element-plus/icons-vue'
import { routes} from '@/router/index'

export default {
    data() {
        return {
            routers: routes[0].children
        }
    },
    props: {
        collapse: Boolean
    },
    components: {
        HomeFilled,
        UserFilled,
        User,
        Avatar,
        PictureFilled,
        CirclePlus,
        HelpFilled,
        Shop,
        ShoppingBag,
        FirstAidKit
  },
    mounted() {
      console.log(this.routers);
    },
}

</script>
<template>
    <el-menu 
          :collapse="collapse"
          :router="true"
        >
          <el-menu-item index="home">
              <el-icon><HomeFilled /></el-icon>
              <span>首页</span>
          </el-menu-item>

          <el-sub-menu v-for="item in routers" :key="item.path" :index="item.path">
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span> {{ item.label }} </span>
          </template>

            <el-menu-item v-for="child in item.children" :key="child.path" :index="`/${item.path}/${child.path}`">
              <el-icon>
                <!-- <User /> -->
                <component :is="child.icon"></component>
              </el-icon>
              {{ child.label }}
            </el-menu-item>
            <!-- <el-menu-item index="/manager/userList">
              <el-icon><Avatar /></el-icon>
              用户列表
            </el-menu-item> -->

        </el-sub-menu>

        

      </el-menu>
</template>
<style></style>